<script lang="ts" setup>
import { ref } from 'vue'
import { queryRefundDetail } from '@/api/expense'
import { queryRefundDetailResponseData } from '@/api/expense/types/expense'
import CustomFormItem from '@/components/basic/CustomFormItem.vue'
import { getToken } from '@/utils/cache/cookies'
const dialogVisible = ref<boolean>(false)
const orderId = ref<string>('')
const previousOrderId = ref<string | null>(null)
type ComponentType = 'rent' | 'deposit' | ''
const type = ref<ComponentType>('rent')
const open = () => {
  if (orderId.value !== previousOrderId.value) {
    previousOrderId.value = orderId.value
    getData()
  }
  dialogVisible.value = true
}
const setId = (newId: string, ty: ComponentType) => {
  orderId.value = newId
  type.value = ty
}
defineExpose({ open, setId })
const data = ref<queryRefundDetailResponseData | null>(null)
const getData = async () => {
  try {
    const res = await queryRefundDetail({
      token: getToken() ?? '',
      orderId: orderId.value
    })
    if (res.statusCode === '0') {
      data.value = res.data
    }
  } catch (error) {
    console.error(error)
  }
}
</script>

<template>
  <el-dialog
    title="退款详情"
    v-model="dialogVisible"
    width="700px"
    :append-to-body="true"
    class="refund-info_dialog"
  >
    <custom-form-item>
      <template #label>
        <span>订单号: </span>
      </template>
      <template #value>
        <span>{{ data?.orderId }}</span>
      </template>
      <template #label2>
        <span>用户手机号: </span>
      </template>
      <template #value2>
        <span>{{ data?.userPhone }}</span>
      </template>
    </custom-form-item>
    <template v-if="type === 'rent'">
      <custom-form-item>
        <template #label>
          <span>退款类型: </span>
        </template>
        <template #value>
          <span>{{ data?.refundType }}</span>
        </template>
        <template #label2>
          <span>退款租金: </span>
        </template>
        <template #value2>
          <span>{{ data?.refundRent }}</span>
        </template>
      </custom-form-item>
      <custom-form-item>
        <template #label>
          <span>退款押金: </span>
        </template>
        <template #value>
          <span>{{ data?.refundDeposit }}</span>
        </template>
        <template #label2>
          <span>退款渠道: </span>
        </template>
        <template #value2>
          <span>{{ data?.refundPath }}</span>
        </template>
      </custom-form-item>
    </template>
    <template v-else>
      <custom-form-item>
        <template #label>
          <span>退款类型: </span>
        </template>
        <template #value>
          <span>{{ data?.refundType }}</span>
        </template>
        <template #label2>
          <span>退款押金: </span>
        </template>
        <template #value2>
          <span>{{ data?.refundDeposit }}</span>
        </template>
      </custom-form-item>
    </template>
    <custom-form-item>
      <template #label>
        <span>退款订单号: </span>
      </template>
      <template #value>
        <span>{{ data?.refundOrderId }}</span>
      </template>
      <template #label2>
        <span>退款渠道: </span>
      </template>
      <template #value2>
        <span>{{ data?.refundPath }}</span>
      </template>
    </custom-form-item>
    <el-steps align-center :active="Number(data?.step)">
      <el-step v-for="step in data?.refundData" :key="step.title" :title="step.title">
        <template #icon>
          <div class="xy-step-circle" />
        </template>
        <template #description>
          <div>{{ step.approveTime }}</div>
          <div>{{ step.operator }}</div>
        </template>
      </el-step>
    </el-steps>
  </el-dialog>
</template>

<style scoped></style>
